<template>
	<view class="detail u-skeleton">
		<u-navbar title="商品详情" :background="{
			'backgroundColor':'#fff'
		}" :borderBottom="false" class="u-skeleton-rect"></u-navbar>
		
		<view class="u-skeleton-rect">
			<u-swiper :list="list" mode='number' height='750' indicator-pos="bottomRight" :autoplay="false"></u-swiper>
		</view>
		
		<view class="goods-detail u-skeleton-rect">
			<view class="price">
				<view class="p-tips">￥</view>{{goodsInfo.price}}<view class="tips-right">售价</view>
			</view>
			<view class="price-tips">
				<view class="left">
					<view class="txt">原价￥ / {{goodsInfo.original_price}}</view>
					<!-- <view class="txt">运费：免运费</view> -->
				</view>
				<view class="right">{{goodsInfo.show_volume}}付款</view>
			</view>
			<view class="title">{{goodsInfo.name}}</view>
		</view>
		
		<view class="goodsnotes-box record u-skeleton-rect" v-if="goodsInfo.brief">
			<view class="title">商品备注</view>
			<view class="goodsnotes">{{goodsInfo.brief}}</view>
		</view>
		
		<view class="goods-info u-skeleton-rect">
			<view class="tips-info">保障</view>
			<view class="tips">严格查验 / 正品保障 / 假一赔三 </view>
		</view>
		
		<view class="record u-skeleton-rect" v-if="buyLogList.length">
			<view class="title">购买记录</view>
			<scroll-view :scroll-y="true" class="diy-scroll">
				<view class="item" v-for="(item,index) in buyLogList" :key="index">
					<image :src="$util.img(item.image)" mode=""></image>
					<text>购买数量*{{item.num}}</text>
					<text>￥{{item.price * item.num}}</text>
					<text>{{item.create_time}}</text>
				</view>
			</scroll-view>
		</view>
		
		<!-- 富文本 -->
		<view class="box-parse u-skeleton-rect">
			<u-parse :html="goodsInfo.content"></u-parse>
		</view>
		
		<!-- 底部导航 -->
		<view class="die-bottom u-skeleton-rect">
			<view class="left" @click="customerShow = true">
				<image :src="$util.img('/static/img/index/客服.png')" mode="widthFix"></image>
				<view class="txt">客服</view>
			</view>
			<view class="right">
				<u-button class="primary" @click="btn" ripple-bg-color="rgba(0,0,0,.4)" :ripple="true">立即购买</u-button>
			</view>
		</view>

		<!-- 弹出层 -->
		<u-popup v-model="show" mode="bottom">
			<view class="popup-box">
				<view class="p-top" v-if="list[0]">
					<image class="p-left" :src="$util.img(list[0])" mode=""></image>
					<view class="p-right">
						<view class="pr-top">￥{{Math.floor(goodsInfo.price) * Math.floor(num)}}</view>
						<view class="pr-bottom">{{goodsInfo.name}}</view>
					</view>
				</view>
				<view class="pr-center">下单后7天内发货</view>
				<view class="pr-num">
					<view class="pr-n-left">请选择数量</view>
					<view class="pr-n-right">
						<u-button class="goods-select" @click="()=>num>1 ? num-- : ''" ripple-bg-color="rgba(0,0,0,.4)" :ripple="true">-</u-button>
						<view class="goods-num">{{num}}</view>
						<u-button class="goods-select" @click="()=>num++" ripple-bg-color="rgba(0,0,0,.4)" :ripple="true">+</u-button>
					</view>
				</view>
				<u-button class="btn-primary" @click="createOrder" ripple-bg-color="rgba(0,0,0,.4)" :ripple="true">立即购买</u-button>
			</view>
		</u-popup>
		<diy-customer :show ="customerShow" @close="customerShow = false"></diy-customer>
		<u-skeleton :loading="loding" :animation="true" bgColor="#FFF" ></u-skeleton>
		
	</view>
</template>

<script>
	import diyCustomer from "../../components/diy-customer/diy-customer.vue"
	export default {
		components:{
			diyCustomer
		},
		data() {
			return {
				customerShow:false,
				list: [],
				//商品详情
				goodsInfo:{},
				loding: true,
				content: ``,
				show:false,
				num:1,
				id:0,
				// 购买记录列表
				buyLogList:[]
			}
		},
		onLoad(option) {
			if(option.id){
				this.getinfo(option.id);
				this.getbuyList(option.id);
				this.id = option.id;
			}
		},
		methods: {
			btn() {
				this.show = true;
			},
			createOrder(){
				this.$util.redirectTo('/pages/order/settlement',{id:this.id,pay_num:this.num})
				return false;
				//获取存在本地创建订单需要用到的数据
				// this.goodsInfo.pay_num = this.num; //购买的数量
				// this.goodsInfo.total_price = Math.floor(this.num) * Math.floor(this.goodsInfo.price) ; //购买的数量
				// uni.setStorage({
				// 	key: 'goodsPay',
				// 	data: this.goodsInfo,
				// 	success:  () => {
						// 跳转创建订单页面
				// 		this.$util.redirectTo('/pages/order/settlement',{id:this.id,pay_num:this.num})
				// 	}
				// })

			},
			//获取当品详情信息
			getinfo(id){
				this.$http.asyncSendrequest({
					url:'/goods/goodsDetail',
					data:{id},
					success:res=>{
						if(res.code == '0') {
							this.loding = false;
							this.goodsInfo = res.data;
							//后台返回数据只有一张图片
							this.list.push(this.goodsInfo.image) 
						}
					}
				})
			},
			//获取商品列表
			getbuyList(id){
				this.$http.asyncSendrequest({
					url:'/goods/buyLog',
					data:{
						page:1,page_size:20,  
						goods_id:id
					},
					success:res=>{
						if(res.code == '0') {
							this.buyLogList = res.data;
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.detail {
		padding-bottom: 150rpx;

		.goods-detail {
			margin: 20rpx 30rpx;
			// height: 280rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 36rpx;
			box-sizing: border-box;

			.price {
				font-size: 44rpx;
				font-family: PingFang SC;
				font-weight: 800;
				color: #000000;
				display: flex;
				align-items: center;
				margin-bottom: 30rpx;

				.p-tips {
					font-size: 26rpx;
					position: relative;
					top: 4rpx;
					font-weight: 800;
				}

				.tips-right {
					font-size: 26rpx;
					font-family: PingFang SC;
					color: #000000;
					margin-left: 16rpx;
					font-weight: 800;
				}
			}

			.price-tips {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 26rpx;

				.left {
					display: flex;
					align-items: center;

					.txt {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #333333;
						margin-right: 45rpx;
						// font-weight: bold;
					}
				}

				.right {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333333;
				}
			}

			.title {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #000000;
			}
		}

		.goods-info {
			margin: 0 30rpx 20rpx;
			padding: 24rpx 36rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			border-radius: 20rpx;
			display: flex;
			align-items: center;

			.tips-info {
				width: 80rpx;
				height: 40rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #fff;
				border-radius: 8rpx;
				margin-right: 34rpx;
				background: #292929;
				text-align: center;
				line-height: 40rpx;
			}

			.tips {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #000000;
			}
		}
		.goodsnotes-box{
			min-height: 100rpx;
		}
		.record {
			margin: 20rpx 30rpx 28rpx;
			// height: 300rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 30rpx 40rpx;
			box-sizing: border-box;

			.title {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #000000;
				margin-bottom: 30rpx;
				font-weight: bold;
			}

			.diy-scroll {
				height: 168rpx;

				.item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 16rpx;

					image {
						width: 45rpx;
						height: 45rpx;
						border-radius: 50%;
					}

					text {
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #333333;
					}
				}
			}
		}

		.box-parse {
			margin: 20rpx 30rpx 0;
		}

		.die-bottom {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 130rpx;
			background: #FFFFFF;
			padding: 24rpx 30rpx 24rpx 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			.left {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				image {
					width: 50rpx;
					height: 50rpx;
					margin-bottom: 6rpx;
				}

				.txt {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #000000;
				}
			}

			.right {
				width: 80%;
				.primary {
					// width: 560rpx;
					height: 96rpx;
					background: #292929;
					border-radius: 10rpx;
					text-align: center;
					line-height: 96rpx;
					font-size: 36rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
				}
			}
		}
	}
	
	.popup-box{
		height: 625rpx;
		background: #fff;
		border-radius: 10rpx 10rpx 0 0;
		padding: 56rpx 30rpx 50rpx;
		box-sizing: border-box;
		.p-top{
			display: flex;
			align-items: center;
			margin-bottom: 26rpx;
			.p-left{
				width: 180rpx;
				height: 180rpx;
				background: #F8F8F8;
				border-radius: 23rpx;
				margin-right: 42rpx;
			}
			.p-right{
				height: 180rpx;
				.pr-top{
					font-size: 38rpx;
					font-family: PingFang SC;
					font-weight: 800;
					margin-top: 12rpx;
				}
				.pr-bottom{
					width: 408rpx;
					margin-top: 30rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #000000;
				}
			}
		}
		.pr-center{
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
			text-align: right;
			
		}
		.pr-num{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 46rpx;
			.pr-n-left{
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #000000;
			}
			.pr-n-right{
				display: flex;
				align-items: center;
				.goods-select{
					width: 68rpx;
					height: 40rpx;
					background: #292929;
					border-radius: 6rpx;
					text-align: center;
					line-height: 40rpx;
					color: #fff;
					font-size: 26rpx;
				}
				.goods-num{
					margin: 0 42rpx;
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #292929;
				}
			}
		}
		.btn-primary {
			height: 96rpx;
			background: #292929;
			border-radius: 10rpx;
			text-align: center;
			line-height: 96rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			color: #FFFFFF;
			margin-top: 116rpx;
		}
	}
</style>